<template>
  <div class="content">
    <van-nav-bar
     title="模拟扫频"
     left-text="返回"
     left-arrow
     class="header-top"
     @click-left="onClickLeft"/>
    <van-tabs class="monitor-page" v-model="active" @click="tabClk">
      <van-tab title="站点监控">
        <van-search v-model="value"
          @search="onSearch"
          @cancel="onCancel" 
          placeholder="请输入搜索关键词" />
        <div class="page-list">
          <van-cell-group v-for="(item, index) in List" :key="index">
            <van-cell icon="shop-o" :title="item.stationName" is-link :to="{path: '/simulateDetai',name: 'simulateDetai',query: { title:item.stationName }}" />
            <div class="item">
              <span>模拟扫频设备数量: {{item.deviceNum|| 0}}</span>
            </div>
            <div class="item">
              <span>站址信息: {{item.stationAddress}}</span>
            </div>
          </van-cell-group>
        </div>
      </van-tab>
      <van-tab title="设备安装">
        <van-search v-model="value"
          @search="onSearch"
          @cancel="onCancel" 
          placeholder="请输入搜索关键词" />
        <div class="page-list">
          <van-cell-group v-for="(item, index) in List" :key="index">
            <van-cell icon="shop-o" 
              :title="item.stationName" 
              is-link 
              :to="{path: '/simInstDetail',name: 'simInstDetail',query: { title:item.stationName }}" 
            />
            <div class="item">
              <span>地市: {{item.city}}</span>
              <span>区县: {{item.district}}</span>
            </div>
            <div class="item">
              <span>详细地址: {{item.stationAddress}}</span>
            </div>
          </van-cell-group>
        </div>
      </van-tab>
    </van-tabs>
    <div class="no-data" v-if="List.length === 0 && !loading">
       <div><el-icon />暂无数据</div>
    </div>
    <van-loading v-if="List.length === 0 && loading" custom-class="loading" :text="`加载中...`" />
  </div>
</template>

<script>
import testApi from '@/api/test.js'
export default {
    // name: 'simulate',
  data() {
    return {
      // List:[
      //   {
      //     title:'临沐史丹利办公楼',
      //     mc:'测试名称',
      //     sl:'123',
      //     dd:'天隆寺舒服舒服顺风车第三次'
      //   },
      //   {
      //     title:'临沐史丹利办公楼',
      //     mc:'测试名称',
      //     sl:'123',
      //     dd:'天隆寺舒服舒服顺风车第三次'
      //   },
      // ],
      List:[],
      active: 2,
      value: '',
      loading:false,
    };
  },
  created(){
    this.loading = true;
    this.getMonitor();
    
  },
  methods: {
    getMonitor(){
      this.List=[{
        stationName:'临沐史丹利办公楼',
        mc:'测试名称',
        deviceNum:'123',
        stationAddress:'天隆寺舒服舒服顺风车第三次'
      }]
      testApi.getStationMonitor({}).then(res=>{
        this.loading = false;
        if(res.data.code===0&&res.data.data){
          this.List = res.data.data.records;
        }
      })
    },
    getInstall(){
      this.List=[{
        stationName:'临沐史丹利办公楼',
        mc:'测试名称',
        deviceNum:'123',
        stationAddress:'天隆寺舒服舒服顺风车第三次'
      }]
      testApi.getVideoInstall({}).then(res=>{
        this.loading = false;
        if(res.data.code===0&&res.data.data){
          this.List = res.data.data.records;
        }
      })
    },
    tabClk(type){
      this.loading = true;
      this.List = [];
      if(type===0){
        this.getMonitor();
      }else{
        this.getInstall();
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
      // Toast(val);
    },
    onCancel() {
      // Toast('取消');
    },
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__content {
 background-color: #eb4b4b;
}
::v-deep .van-nav-bar__title{
  color: #fff;
}
::v-deep .van-nav-bar .van-icon{
  color: #fff;
}
::v-deep .van-nav-bar__text{
color: #fff;
}
::v-deep .van-tab--active{
  color: #eb4b4b;
}
::v-deep .van-cell-group {
    margin: 13px 0;
}
::v-deep .van-cell__title{
 font-size: 18px;
 color: #000;
}
.item{
  font-size: 14px;
  display: flex;
  padding: 0 7%;
  /* height: 30px; */
  line-height: 30px;
  justify-content: flex-start;
  span:first-child{
      display: inline-block;
      margin-right: 20px;
  }
}

</style>